<template>
	<el-container>
		<div class="right-panel">
			<div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">产品代码:</span>
					<el-input v-model="search.productCode" placeholder="请输入产品代码" style="margin-left: 10px; width: 180px"
						clearable></el-input>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">产品名称:</span>
					<el-input v-model="search.productName" placeholder="请输入产品名称" style="margin-left: 10px; width: 180px"
						clearable></el-input>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">产品大类:</span>
					<!-- <el-input
						v-model="search.productCategory"
						placeholder="请输入产品大类"
						style="margin-left: 10px; width: 180px"
						clearable
					></el-input> -->
					<el-select v-model="search.productCategory" placeholder="请选择产品大类"
						style="margin-left: 10px; width: 180px" filterable clearable>
						<el-option
							v-for="(item, index) in productSpecList"
							:key="index"
							:label="item.largeCategory"
							:value="item.largeCategory"
						></el-option>
					</el-select>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">厂家:</span>
					<el-input v-model="search.manufacturer" placeholder="请输入厂家" style="margin-left: 10px; width: 180px"
						clearable></el-input>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">规格:</span>
					<el-input v-model="search.specification" placeholder="请输入规格" style="margin-left: 10px; width: 180px"
						clearable></el-input>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">物料描述:</span>
					<el-input v-model="search.materialDescription" placeholder="请输入物料描述"
						style="margin-left: 10px; width: 180px" clearable></el-input>
				</div>
				<div class="panel-search-box">
					<el-button type="primary" style="margin-left: 10px" @click="upsearch">查询</el-button>
					<el-button type="" @click="cleanSearch">清空</el-button>
				</div>
			</div>
		</div>
		<el-header style="display: none"></el-header>
		<el-main class="nopadding">
			<scTable ref="table" border :apiObj="apiObj" :params="params" stripe remoteSort remoteFilter
				@selection-change="selectionChange">
				<!-- <el-table-column type="selection" width="50"></el-table-column> -->

				<el-table-column fixed='left' label="产品代码" prop="productCode" align="center" width="150"></el-table-column>
				<el-table-column fixed='left' label="产品名称" prop="productName" align="center" width="150"></el-table-column>
				<el-table-column label="产品大类" prop="productCategory" align="center" width="150"></el-table-column>
				<el-table-column label="规格" prop="specification" align="center" width="150"></el-table-column>
				<el-table-column label="物料描述" prop="materialDescription" align="center" width="150"></el-table-column>
				<el-table-column label="厂家" prop="manufacturer" align="center" width="150"></el-table-column>
				<el-table-column label="产品定位" prop="productPositioning" align="center" width="150"></el-table-column>
				<el-table-column label="价格" prop="price" align="center" width="150"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="180">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small" @click="table_show(scope.row)">查看详情 </el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
		<editDialog v-if="dialog.edit" ref="editDialog" @success="handleSuccess" @closed="dialog.edit = false"
			@guanbi="close">
		</editDialog>
	</el-container>
</template>

<script>
import editDialog from './edit'
export default {
	name: 'productList',
	components: {
		editDialog
	},
	data() {
		return {
			dialog: {
				edit: false
			},
			search: {},
			apiObj: this.$API.productCenter.productList.list,
			params: {},
			productSpecList: []
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val)
		}
	},
	created() {
		this.getProductSpec()
	},
	methods: {
		//获取产品大类列表
		async getProductSpec() {
			// let res = await this.$API.plan.productList.get()
			// this.productSpecList = res.data
			this.productSpecList = [
				{ largeCategory: '感冒类' },
				{ largeCategory: '皮肤类' },
				{ largeCategory: '丸剂类' },
				{ largeCategory: '胃药类' },
			]

		},
		//任务
		downTemp() {
			// 下载模板
		},
		//编辑
		table_edit(row) {
			this.dialog.edit = true
			this.$nextTick(() => {
				this.$refs.editDialog.open('edit').setData(row)
			})
		},
		//表格内开关
		async changeSwitch(val, row) {
			row.enable = row.enable === 1 ? 0 : 1
			row.$switch_status = true
			let data = {
				enable: val,
				staffNumber: row.staffNumber
			}
			var res = await this.$API.user.user.enable.post({ data: {} })
			if (res && res.code === 0) {
				setTimeout(() => {
					delete row.$switch_status
					row.enable = val
					// console.log(typeof val, row)
					this.$message.success('操作成功')
				}, 500)
			}
		},

		//查看
		table_show(row) {
			this.dialog.edit = true
			this.$nextTick(() => {
				this.$refs.editDialog.open().setData(row)
			})
		},

		upsearch() {
			this.$refs.table.upData(this.search)
		},
		cleanSearch() {
			this.search = {}
			this.$refs.table.reload(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode === 'add') {
				data.id = new Date().getTime()
				this.$refs.table.tableData.unshift(data)
			} else if (mode === 'edit') {
				this.$refs.table.tableData
					.filter((item) => item.id === data.id)
					.forEach((item) => {
						Object.assign(item, data)
					})
			}
		}
	}
}
</script>

<style>
.header-btn-item {
	display: flex;
}
</style>
